<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .text-center{
      text-align:center
    }
    .col_cont{
      width:300px;height:300px;
      margin: 200px auto;overflow: hidden
    }
    .thumbnail{
      cursor:pointer;
      text-decoration:none;display:block;
      padding:4px;height:200px;font-weight:bold;
      border:1px solid #ddd;
      overflow: hidden;
    }
    .thumbnail img, .thumbnail h3{
      transition:all .8s;
      -webkit-transition:all .8s;
      -ms-transition:all .8s;
    }
    .thumbnail img{
      width:35%;
      margin-top:30px
    }
    .thumbnail h3{
      color:silver
    }
    .thumbnail:hover img{
      -webkit-transform:translateY(-120px);
      -moz-transform:translateY(-120px);
      -ms-transform:translateY(-120px);
      -o-transform:translateY(-120px);
      transform:translateY(-120px)
    }
    .thumbnail:hover h3{
      color:#2c3e50
    }
  </style>
</head>
<body>
<div class="col_cont">
  <a class="thumbnail text-center">
    <img src="http://aimg8.dlszywz.com/wap/copy/pic_new/224_2000/1/1145_4578801526981210.jpg?x-oss-process=image/resize,w_148" alt="...">
    <div class="caption">
      <h3>产品介绍产品介绍</h3>
    </div>
  </a>
</div>
</body>
</html>
